<template>
    <div class="management-less">
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="export-less">
                        <el-button type="primary" @click="dialogFormVisible = true,title='新增科目',clearData()">新增科目</el-button>
                    </div>
                    <div class="border-s my-test">
                        <el-table :data="tableData" style="width: 100%" :border="false" @row-click="clickRow" highlight-current-row>
                            <el-table-column prop="chName" label="科目名"></el-table-column>
                            <el-table-column prop="enName" label="英文名"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button @click.stop="dialogFormVisible = true,title='修改科目',subjectsDataId(scope.row.id)" type="text" size="medium" class="button-my-test">修改</el-button>
                                    <el-button @click.stop="confirm(scope.row.id)" type="text" size="medium" class="button-my-test">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="export-less">
                        <el-button type="primary" @click="clearData(),panduan()">新增等级</el-button>
                    </div>
                    <div class="border-s my-test">
                        <el-table :data="kmData" style="width: 100%" :border="false" @row-click="clickRowLevel" highlight-current-row>
                            <el-table-column prop="name" label="等级"> </el-table-column>
                            <el-table-column prop="price" label="考试费用"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button @click.stop="dialogLevel = true,title='修改等级',updeteLevel(scope.row.id)" type="text" size="medium" class="button-my-test">修改</el-button>
                                    <el-button @click.stop="confirmLevel(scope.row.id)" type="text" size="medium" class="button-my-test">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="export-less op">
                       <el-button type="primary">新增等级</el-button>
                    </div>
                    <div class="border-s my-test">
                        <el-table :data="membersData" style="width: 100%" :border="false">
                            <el-table-column prop="vipLevel" label="会员等级" :formatter="sexVipLevel"></el-table-column>
                            <el-table-column prop="value" label="优惠费用"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button @click.stop="dialogMembers = true,selectMembers(scope.row.id),title='优惠额度修改'" type="text" size="medium" class="button-my-test">修改</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" center width="25%">
            <el-form :model="addSubjects">
                <el-form-item label="科目名" label-width="80px">
                    <el-input v-model="addSubjects.chName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="英文名" label-width="80px">
                    <el-input v-model="addSubjects.enName" autocomplete="off" @input="yw($event)"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false,addSub()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="dialogLevel" center width="25%">
            <el-form :model="addLevel">
                <el-form-item label="等级" label-width="80px">
                    <el-input v-model="addLevel.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="考试费用" label-width="80px">
                    <el-input v-model="addLevel.price" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogLevel = false">取 消</el-button>
                <el-button type="primary" @click="dialogLevel = false,addLevelSub()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="dialogMembers" center width="25%">
            <el-form :model="addMembersData">
                <el-form-item label="会员等级" label-width="80px">
                    <el-input v-model="addMembersData.vipLevel" autocomplete="off" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="优惠费用" label-width="80px">
                    <el-input v-model="addMembersData.value" autocomplete="off" @input="handleInput"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogMembers = false">取 消</el-button>
                <el-button type="primary" @click="dialogMembers = false,updateMembers()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            tableData:[],
            kmData:[],
            dialogFormVisible:false,
            dialogLevel:false,
            dialogMembers:false,
            addSubjects:{
                chName:'',
                enName:''
            },
            formInline: {
                conditions:[],
                pageable:{
                    current:1,
                    size:100
                },
            },
            subjectsId:'',
            kmPage:{
                conditions:[{
                    expression:'=',
                    column:'subjectsId',
                    value:''
                }],
                pageable:{
                    current:1,
                    size:100
                },
            },
            addLevel:{
                subjectsId:'',
                name:'',
                price:''
            },
            title:'',
            membersData:[],
            addMembersData:{
                vipLevel:'',
                value:''
            },
            membersListId:'',
            djMoney:''
        }
    },
    mounted(){
        this.subjectList()
    },
    methods:{
        yw(e){
            this.addSubjects.enName = e.replace(/[^a-zA-Z]/g, '')
        },
        handleInput(e){
            this.addMembersData.value = e.replace(/[^\d]/g,'')
            if(e > this.djMoney){
                this.addMembersData.value = Number(this.djMoney) - 1
            }else{
                this.addMembersData.value = e.replace(/[^\d]/g,'')
            }
        },
        // 会员过率器
        sexVipLevel(row){
            if(row.vipLevel == 0){
                return '普通会员'
            }else if(row.vipLevel == 1){
                return '一年会员' 
            }else{
                return '终生会员'
            }
        },
        // 点击当前行获取id
        clickRow(data){
            this.membersData = []
            this.kmPage.conditions[0].value = data.id
            this.addLevel.subjectsId = data.id
            this.subjectsLevelPageList()
        },
        // 获取科目列表
        subjectList(){
            apiHttp.apiIndex.subjects(this.formInline).then(resp=>{
                if(resp.code == 0){
                    this.tableData = resp.data.records
                }
            })
        },
        panduan(){
            if(this.addLevel.subjectsId){
                this.dialogLevel = true
                this.title='新增等级'
            }else{
                this.$message({
                    type: 'warning',
                    message: '请选择科目!'
                })
            }
        },
        // 添加科目
        addSub(){
            apiHttp.apiIndex.subjectsData(this.addSubjects).then(resp=>{
                if(resp.code == 0){
                    this.subjectList()
                    this.clearData()
                }
            })
        },
        // 获取单个科目的信息
        subjectsDataId(id){
            apiHttp.apiIndex.subjectsDataId(id).then(resp=>{
                if(resp.code == 0){
                    this.addSubjects.id = id
                    this.addSubjects.chName = resp.data.chName
                    this.addSubjects.enName = resp.data.enName
                }
            })
        },
        // 清空数据
        clearData(){
            if(this.addSubjects.id){
                delete this.addSubjects.id
            }
            this.addSubjects.chName = ''
            this.addSubjects.enName = ''
            if(this.addLevel.id){
                delete this.addLevel.id
            }
            this.addLevel.name = ''
            this.addLevel.price = ''
        },
        // 删除科目
        confirm(id) {
            this.$confirm('您确定要删除吗?', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                center:'true'
            }).then(() => {
                apiHttp.apiIndex.subjectsDeleteDataId(id).then(resp=>{
                    if(resp.code == 0){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.subjectList()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        // 获取科目等级
        subjectsLevelPageList(){
            apiHttp.apiIndex.subjectsLevelPage(this.kmPage).then(resp=>{
                if(resp.code == 0){
                    this.kmData = resp.data.records
                }
            })
        },
        // 添加科目等级
        addLevelSub(){
            apiHttp.apiIndex.subjectsLevelData(this.addLevel).then(resp=>{
                if(resp.code == 0){
                    this.subjectsLevelPageList()
                }
            })
        },
        // 删除科目等级
        confirmLevel(id) {
            this.$confirm('您确定要删除吗?', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                center:'true'
            }).then(() => {
                apiHttp.apiIndex.subjectsDeleteLevelDataId(id).then(resp=>{
                    if(resp.code == 0){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.subjectsLevelPageList()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        // 查询单个科目等级
        updeteLevel(id){
            apiHttp.apiIndex.subjectsLevelDataId(id).then(resp=>{
                if(resp.code == 0){
                    this.addLevel.id = resp.data.id
                    this.addLevel.name = resp.data.name
                    this.addLevel.price = resp.data.price
                }
            })
        },
        // 获取等级对应的优惠费用
        clickRowLevel(data){
            this.membersListId = data.id
            this.djMoney = data.price
            this.DiscountsList()
        },
        DiscountsList(){
            apiHttp.apiIndex.subjectsLevelDiscounts(this.membersListId).then(resp=>{
                if(resp.code == 0){
                    this.membersData = resp.data
                }
            })
        },
        // 获取单个会员信息
        selectMembers(id) {
            apiHttp.apiIndex.selectMembers(id).then(resp => {
                if(resp.code == 0){
                    this.addMembersData.id = resp.data.id
                    if(resp.data.vipLevel == 0){
                        this.addMembersData.vipLevel = '普通会员'
                    }else if(resp.data.vipLevel == 1){
                        this.addMembersData.vipLevel = '一年会员'
                    }else{
                        this.addMembersData.vipLevel = '终身会员'
                    }
                    // this.addMembersData.vipLevel = resp.data.vipLevel
                    this.addMembersData.value = resp.data.value
                }
            })
        },
        // 更新会员信息
        updateMembers(){
            if(this.addMembersData.vipLevel == '普通会员'){
                this.addMembersData.vipLevel = 0
            }else if(this.addMembersData.vipLevel == '一年会员'){
                this.addMembersData.vipLevel = 1
            }else{
                this.addMembersData.vipLevel = 2
            }
            apiHttp.apiIndex.updateMembers(this.addMembersData).then(resp=>{
                if(resp.code == 0){
                    this.DiscountsList()
                }
            })
        }
    }
}
</script>
<style lang="less">
.management-less{
    .export-less{
        text-align: left;
        margin-bottom: 15px;
        .jiafei{
            display: block;
            margin-top: 15px;
        }
    }
    .op{
        opacity: 0;
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
    }
    .rejected{
        .el-dialog__body{
            padding: 25px 25px 10px;
            .el-form-item__label{
                display: none;
            }
            .el-form-item__content{
                margin-left: 0 !important;
            }
        }
        .el-dialog__footer{
            .el-button--primary{
                background-color: #5d2805;
                border-color: #5d2805;
            }
            .el-button--default:hover{
                background-color: #e4d7cf;
                border-color: #e4d7cf;
                color: #5d2805;
            }
        }
        .el-textarea__inner{
            min-height: 100px !important;
        }
    }
}
.el-message-box__message{
    font-size: 18px;
}
</style>
